import React from 'react'
import ReactDOM from 'react-dom'

// 组件优化，避免没必要的组件重新渲染，，案例

// 生成随机数
class App extends React.Component{
    state = {
        number: 0
    }

    handleClick = () => {
        this.setState(() => {
            return {
                number: Math.floor(Math.random() * 3) // 随机数：0-2之间
            }
        })
    }

    // 因为两次生成的随机数可能相同，如果相同的话就不用重新渲染
    // shouldComponentUpdate(nextProps, nextState) {
    //     console.log("最新状态：", nextState, "当前状态：",this.state.number)
    //     // 使用state进行阻止
    //     return nextState.number !== this.state.number
    // }

    render() {
        // console.log("render")
        return (
            <div>
                {/* <h1>随机数：{this.state.number}</h1> */}
                <NumberBox number={this.state.number} />
                <button onClick={this.handleClick}>重新生成</button>
            </div>
        )
    }
}

// 使用props进行阻止或者运行,props是传递接收的状态，不是自身的状态
class NumberBox extends React.Component{

    shouldComponentUpdate(nextProps){
        console.log("最新状态：", nextProps, "当前状态：",this.props)
        return nextProps.number !== this.props.number
    }

    render() {
        console.log("子组件中的render")
        return (<h1>随机数: {this.props.number}</h1>)
    }
}

ReactDOM.render(<App />, document.getElementById('root'))